import React from "react";

const CouponInfo = () => {
    // 返回
    const back = () => {
        React.navigate(-1)
    }
    React.useEffect(() => {
        getCouponData()
        getRecordData()
    }, [])
    // 获取优惠券数据
    // 获得id
    const [searchParams] = React.Router.useSearchParams()
    const [cid, setCid] = React.useState(searchParams.get("cid"))
    const busid = React.Business.id ?? 0;
    const [couponInfo, setCouponInfo] = React.useState({
        title: '',
        rate: 0,
        reveive: false,
        total:0,
        createtime_text:0,
        endtime_text:0,
    })
    // 得到优惠券数据
    const getCouponData = async () => {
        let result = await React.HTTP.post("/coupon/info", { cid, busid })
        if (result.code == 1) {
            setCouponInfo(result.data)
            return false
        } else {
            React.error(result.msg, () => {
                React.navigate(-1)
            })
            return false
        }
    }
    // 获取领取记录
    const [record, setRecord] = React.useState([])
    const getRecordData = async () => {
        let result = await React.HTTP.post("/coupon/record", { cid })
        if (result.code == 1) {
            setRecord(result.data)
        } else {
            return false
        }
    }
    // 领取优惠券
    const couponReceive = async () => {
        let result = await React.HTTP.post("/coupon/receive",{busid,cid})
        if(result.code == 1){
            React.success(result.msg,()=>{
                React.navigate("/business/coupon")
                return false
            })
        }else{
            React.error(result.msg);
            return false
        }
    }
    return (<>
        <link rel="stylesheet" href="/assets/css/coupon-info.css" />
        <React.UI.NavBar onBack={back}>{couponInfo.title}</React.UI.NavBar>
        {
            record.length ?
                <React.UI.Swiper 
                autoplay={true}
                autoplayInterval={3000}
                loop={true}
                indicator={() => false}
                direction='vertical' 
                style={{ '--height': '40px', 'border':'0px' }}
                >
                    {
                        record.map((item: any, index: number) => 
                            <React.UI.Swiper.Item key={item.id}>
                                <React.UI.NoticeBar
                                    style={{ 'border': '0px' }}
                                    content={`用户：${item.business.nickname ? item.business.nickname : '匿名用户'} 在 ${item.createtime} 领取了优惠券`}
                                    color='info'
                                />
                            </React.UI.Swiper.Item>
                        )
                    }

                </React.UI.Swiper>
                :
                ''
        }

        {/* 优惠券详情 */}
        <div className="coupon_detail">
            <div className="coupon_info">
                <div className="left">
                    <div className="left_top">
                        <div>
                            <span>{couponInfo.rate * 10}</span>折
                        </div>
                        <div className="top_info">
                            <div>优惠券</div>
                            <div>COUPON</div>
                        </div>
                    </div>
                </div>
                <div className="receive">
                    {couponInfo.reveive ?
                        <React.UI.Button size="small" disabled color='primary'>您已领取</React.UI.Button> :
                        <React.UI.Button size="small" onClick={couponReceive} color='primary'>领取</React.UI.Button>
                    }


                </div>
            </div>
            <div className="coupon_prompt">
                <div className="prompt_title">温馨提示：</div>
                <div><span>•</span>仅限量{couponInfo.total}张，赶快领取！</div>
                <div><span>•</span>领取后{couponInfo.createtime_text}至{couponInfo.endtime_text}有效</div>
            </div>
        </div>
    </>)
}

export default CouponInfo